<template>
	<el-main style="padding: 20px">
		<el-button type="primary" size="mini" icon="el-icon-plus" @click="tianjia = true">
			选择每日一练习题
		</el-button>
		<!-- 组合习题 -->
		<el-dialog :visible.sync="AddtEaxm" width="80%">
			<el-radio-group v-model="radio" style="margin-top: 20px" v-if="typeList">
				<el-radio :label="item.categoryCode" v-for="(item, index) in typeList" :key="index">
					{{ item.categoryName }}
				</el-radio>
			</el-radio-group>
			<el-table :data="ExamList" ref="multipleTable" style="width: 100%" :row-key="getRowKeys"
				tooltip-effect="dark" @select="onTableSelect" @selection-change="selectEaxm">
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="content" label="题目"></el-table-column>
				<el-table-column prop="type" label="类型（1-选择 2-填空 3-简答 4-判断 5-多选 6-计算 7-论叙 8-操作）"></el-table-column>
			</el-table>
			<el-pagination background layout="prev, pager, next" :page-count="ExamData.pages" :current-page="Examcur"
				@current-change="ExamQie"></el-pagination>
			<div style="text-align: right">
				<el-button type="primary" size="mini" @click="tanchuExam()"> 确认选中 </el-button>
			</div>
		</el-dialog>
		<el-dialog title="请填写分数" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
			<el-input v-model="point" placeholder="默认为1分"></el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="okExam">确 定</el-button>
			</span>
		</el-dialog>

		<div class="table-box">
			<el-table :data="course" style="width: 100%">
				<el-table-column prop="chapterName" label="章节"></el-table-column>
				<!-- <el-table-column prop="chapterId" label="类型"></el-table-column> -->
				<!--  <el-table-column prop="shname" label="题库">
           <template slot-scope="scope">
          <el-tag  @click="look(scope.row)" >{{scope.row.shname}}</el-tag>
          </template>
        </el-table-column> -->
				<el-table-column prop="crtDate" label="日期"></el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<!-- <el-button @click="addWord(scope.row)" type="text" size="mini"
              >组合习题</el-button
            > -->
						<el-button @click="showEditView(scope.row)" type="text" size="mini">查看</el-button>
						<!-- <el-button @click="setbianji(scope.row)" type="text" size="mini">编辑</el-button>
						<el-button type="text" size="mini" @click="deleteObj(scope.row)">删除</el-button> -->
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background layout="prev, pager, next" :page-count="dailyData.pages" :current-page="dailyCur"
				@current-change="dailyQie"></el-pagination>
		</div>

		<el-dialog :visible.sync="showAddView" width="40%">
			<el-form class="demo-ruleForm">
				<div class="block">
					<el-tag style="margin-right:8px">选择分类：</el-tag>
					<el-cascader size="small" v-model="val2" :options="toplist" @change="handleChange"
						:props="listchange"></el-cascader>
				</div>
				<el-tag style="margin-right:8px">名称：</el-tag>
				<el-input style="width:50%" v-model="nowclassName" size="small" placeholder="请输入标题名称"></el-input>
			</el-form>
			<el-button type="primary" size="mini" style="margin-top:5%" @click="setData()"> 修改 </el-button>
		</el-dialog>
		<el-dialog :visible.sync="tianjia" width="30%">
			<el-form class="demo-ruleForm">
				<div class="block">
					<el-tag style="margin-right:8px">选择分类：</el-tag>
					<el-cascader size="small" v-model="val2" :options="toplist" @change="handleChange"
						:props="listchange"></el-cascader>
				</div>
				<div class="block">
					<el-tag style="margin-right:8px">选择类目:</el-tag>
					<el-cascader size="small" v-model="val3" :options="leimu" @change="handleChangeleimu"
						:props="listchanges"></el-cascader>
				</div>
				<div class="block">
					<el-tag style="margin-right:8px">选择题库：</el-tag>
					<el-cascader size="small" v-model="val5" :options="dataExam" @change="handleChanges"
						:props="listname"></el-cascader>
				</div>
				<!-- <div class="block">
					<el-tag style="margin-right:8px">自定义名称：</el-tag>
					<el-input style="width:30%" v-model="titlename" size="small" placeholder="请输入标题名称"></el-input>

				</div> -->
				<!-- <el-form-item label="科目">
          <el-select placeholder="请选择科目" v-model="val2">
            <el-option
              v-for="(item, index) in course"
              :key="index"
              :label="item.chapterName"
              :value="item.chapterId"
            >
              {{ item.chapterName }}
            </el-option>
          </el-select>
        </el-form-item> -->
			</el-form>
			<el-button type="primary" style="margin-top:5%" size="mini" @click="addData()"> 添加 </el-button>
		</el-dialog>
	</el-main>
</template>

<script>
	export default {
		data() {
			return {
				titlename: '',
				listchange: {
					label: "className",
					value: "classId",
				},
				listchanges: {
					label: "typeName",
					value: "typeId",
				},
				listname: {
					label: "name",
					value: "id",
				},
				classId: '',
				dailyCur: 1,
				radio: 1,
				subjectId: 1,
				dialogVisible: false,
				showAddView: false,
				value: "",
				val2: "",
				tianjia: false,
				course: [],
				list: [],
				leimu: [],
				testid: 1,
				page: 1,
				size: 10,
				examPage: 1,
				nowclassName: '',
				examSize: 10,
				AddtEaxm: false,
				ExamList: [],
				ExamData: [],
				Examcur: 1,
				selectAdd: [],
				point: "",
				typeList: [],
				dailyData: [],
				currentPage: 1,
				toplist: [],
				zancun: [],
				dataExam: [],
				val3: '',
				val5: [],
				courses: []
			};
		},
		inject: ["reload"],
		mounted() {
			// this.getlists();
			this.getType();
			this.getFenlei();
			this.queryCourse();
			
		},
		watch: {
			radio() {
				this.page = 1;
				this.getEaxm();
			},
		},
		methods: {
			look(shu) {
				// 获取每日一练详情
				
					// path: "/Daily/new?id=" + shu.testId + '&shid=' + shu.shoreHouseId
					 this.$router.push({ path: "/Xiaojie?id=" + this.chapterId+'&chapterId='+shu.chapterId +'&leimuid='+this.leimuid });
				
			},
			handleChangeleimu(e) {
				console.log(e)
				//33
				this.val3 = e
				let params = {
					page: this.page,
					size: this.size,
					classId: this.classId,
					typeId: e[0]
				};
				// this.postRequest(`/back/shorehouse/queryShoreHouseList`, params).then((res) => {
				// 	this.dataExam = res.data.data.list;
				// 	this.dataExam.forEach((item, i) => {
				// 		if (Array.isArray(item.item)) {
				// 			this.dataExam[i].item = item.item.join(" - ");
				// 		}
				// 		// isArray(item.item)
				// 	});
				// 	this.data = res.data.data;
				// 	//console.log(res);
				// });
				
			},
			handleChanges(e) {
				this.val5 = e
				console.log(e)
				this.postJson("/back/chapter/queryPracticeChapterList", {
					pchapterId: this.val5[0]
				}).then((res) => {
					let course = res.data.data
					let an = []
					course.forEach((item) => {
						an.push(item)
					})
					this.courses = an
					console.log(an)
				});
			},
			getRowKeys(row) {
				return row.id;
			},
			onTableSelect(rows, row) {
				this.selected = rows.length && rows.indexOf(row) !== -1;
				//console.log(this.selected);
			},
			//列表展示
			getlists() {
				let params = {
					page: this.page,
					size: this.size
				};
				this.postRequest("/back/practicetest/queryPracticeTestList", params).then((res) => {
					// console.log(res);
					this.dailyData = res.data.data;
					this.list = res.data.data.list;
					this.list.forEach((item) => {
						//console.log(item);
						this.course.forEach((value) => {
							//console.log(value);
							if (item.chapterId == value.chapterId) {
								item.kemu = value.chapterName;
							}
						});
					});
				});
			},
			//选择结果
			handleChange(e) {
				console.log(e);
				let params = {
					page: this.page,
					size: this.size,
					classId: e[1],
				};
				this.postRequest(`/back/shorehouse/queryShoreHouseList`, params).then((res) => {
					this.dataExam = res.data.data.list;
					this.dataExam.forEach((item, i) => {
						if (Array.isArray(item.item)) {
							this.dataExam[i].item = item.item.join(" - ");
						}
						// isArray(item.item)
					});
					this.classId = e[1];
					let obj = e[1];
					this.postJson(
						"/back/chaptertype/queryListByClassId",
						obj
					).then((res) => {

						this.leimu = res.data.data
					});
					this.data = res.data.data;
					//console.log(res);
				});
			},
			getFenlei() {
				this.postRequest(
					"/back/class/queryPracticeClassList?pageNo=" + this.currentPage + "&pageSize=20"
				).then((res) => {
					this.toplist = res.data.data;
				});
			},
			getType() {
				this.postRequest("/comm/queryCategoryByType", {
					type: "practice_type"
				}).then(
					(res) => {
						//console.log(res);
						this.typeList = res.data.data;
						this.radio = this.typeList[0].categoryCode;
					}
				);
			},
			handleClose(done) {
				this.$confirm("确认关闭？")
					.then((_) => {
						done();
					})
					.catch((_) => {});
			},
			okExam() {
				if (this.point == "") {
					this.point = 1;
				}
				let list = [];
				let that = this;
				this.selectAdd.forEach((item) => {
					let obj = {
						practiceId: item.practiceId,
						point: that.point,
					};
					list.push(obj);
				});
				//console.log(list);
				let listNew = [];
				this.postRequest(`/back/practicetest/getPracticeTest?testId=${this.examId}`).then(
					(res) => {
						listNew = res.data.data.content;
						let arr = [];
						for (var item in listNew) {
							arr = arr.concat(listNew[item]);
						}
						//console.log(arr);
						arr.forEach((item) => {
							list.push({
								practiceId: item.practiceId,
								point: item.point
							});
						});
						that
							.postJson(`/back/practicetest/addTestContent?testId=${that.examId}`, list)
							.then((res) => {
								//console.log(res);
								that.reload();
								that.$message(res.data.msg);
							});
					}
				);
				//console.log(list);
			},
			tanchuExam() {
				//console.log(this.selectAdd);
				this.dialogVisible = true;
			},
			dailyQie(val) {
				//console.log(val);
				this.page = val;
				this.getdata();
			},
			ExamQie(val) {
				//console.log(val);
				this.examPage = val;
				this.getEaxm();
			},
			getEaxm() {
				let params = {
					page: this.examPage,
					size: this.examSize,
					subjectId: this.subjectId,
					type: this.radio,
				};
				this.postRequest(`/back/practicestores/queryPracticeList`, params).then((res) => {
					this.ExamList = res.data.data.list;
					this.ExamData = res.data.data;
					this.toggleSelection();

					//console.log(res);
				});
			},
			//回显
			toggleSelection() {
				let xuanzhong = this.selectAdd;
				let rows = this.ExamList;
				this.$nextTick(() => {
					if (rows.length != 0) {
						rows.forEach((row) => {
							xuanzhong.forEach((xuan) => {
								if (row.practiceId == xuan.practiceId) {
									this.$refs.multipleTable.toggleRowSelection(row, true);
								}
							});
						});
					} else {
						this.$refs.multipleTable.clearSelection();
					}
				});
			},
			selectEaxm(e) {
				// //console.log(e);
				// this.selectAdd = e;
				if (!this.zancun[this.radio]) {
					this.zancun[this.radio] = [];
				}
				this.zancun[this.radio][this.examPage] = e;
				this.selectAdd = [];
				this.zancun.forEach((lei) => {
					lei.forEach((xuan) => {
						for (let j = 0; j < xuan.length; j++) {
							this.selectAdd.push(xuan[j]);
						}
					});
				});
				//console.log(this.zancun);
				//console.log(this.selectAdd);
			},
			addWord(e) {
				//console.log(e);
				this.subjectId = e.subjectId;
				this.getEaxm();
				(this.examId = e.testId), (this.AddtEaxm = true);
			},
			handleSelectionChange(val) {
				//console.log(val);
				this.multipleSelection = val;
			},
			setbianji(data) {
				this.testid = data.testId;
				this.classId = data.classId
				this.nowclassName = data.evname
				this.showAddView = !this.showAddView;
			},
			// 删除,批量删除已逗号隔开
			deleteObj(e) {
				//console.log(e);
				this.postRequest(`/back/practicetest/PracticeTest?ids=${e.testId}`).then((res) => {
					//console.log(res);
					this.$message(res.data.msg);
					this.reload();
				});
			},
			addData() {
				this.postJson("/back/chapter/queryPracticeChapterList",{
				      pchapterId:this.val3[0]
				    }).then((res) => {
				  this.course = res.data.data
				  this.$message(res.data.msg);
				  this.tianjia = false
				  console.log(this.course)
				});
				
			},
			showEditView(shu) {
				// 获取每日一练详情
				// this.$router.push({
					// path: "/Daily/new?id=" + shu.testId + '&shid=' + shu.shoreHouseId
					 this.$router.push({ path: "/Xiaojie?" + 'chapterId='+shu.chapterId+'&classId='+this.val5[0] +'&leimuid='+this.val3[0] });
				// });
			},
			setData() {
				let params = {
					classId: this.classId,
					evname: this.nowclassName
				};
				//console.log(params, this.testid);
				this.postJson(
					`/back/practicetest/updatePracticeTest?id=${this.testid}`,
					params
				).then((res) => {
					this.$message(res.data.msg);
					this.reload();
				});
			},
			queryCourse() {
				// let that = this;
				// return new Promise(function (next, err) {
				//   that.postRequest("/back/chapter/queryPracticeChapterList").then((res) => {
				//     //console.log(res);
				//     that.course = res.data.data;
				//     next();
				//   });
				// });
			},
			getdata() {
				let that = this;
				let params = {
					page: this.page,
					size: this.size
				};
				return new Promise(function(next, err) {
					// that.postRequest('/back/practicetest/queryPracticeTestList', params).then(res => {
					that
						.postRequest("/back/practicetest/queryPracticeTestList", params)
						.then((res) => {
							//console.log(res);
							that.dailyData = res.data.data;
							that.list = res.data.data.list;
							that.list.forEach((item) => {
								//console.log(item);
								that.course.forEach((value) => {
									//console.log(value);
									if (item.chapterId == value.chapterId) {
										item.kemu = value.chapterName;
									}
								});
							});
							next();
						});
				});
			},
		},
	};
</script>

<style>
	/* POST /back/circleinfos/query */
	.block {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 2% 0;
	}
</style>
<!-- postRequest -->
